<template>
  <div class="warp">
    <header>
      <div class="indo-warp">
        <div class="info">
          <div class="avatar">
            <img :src="userList.photo">
          </div>
          <div class="id">{{ userList.name }}</div>
          <div @click="goPersonalInformation">
            <span>个人信息</span>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="message">
          <div>
            <div>{{ userList.art_count }}</div>
            <div>动态</div>
          </div>
          <div>
            <div>{{ userList.follow_count }}</div>
            <div>关注</div>
          </div>
          <div>
            <div>{{ userList.fans_count }}</div>
            <div>粉丝</div>
          </div>
          <div>
            <div>{{ userList.like_count }}</div>
            <div>被赞</div>
          </div>
        </div>
      </div>
      <div class="box1" />
    </header>
    <div class="box">
      <nav>
        <div>
          <van-icon
            name="chat-o"
            size="20"
          />
          <div>消息通知</div>
        </div>
        <div>
          <van-icon
            name="like-o"
            size="20"
          />
          <div>我的收藏</div>
        </div>
        <div>
          <van-icon
            name="clock-o"
            size="20"
          />
          <div>阅读历史</div>
        </div>
        <div>
          <van-icon
            name="user-o"
            size="20"
          />
          <div>我的作品</div>
        </div>
      </nav>
      <main>
        <span>更多服务</span>
        <div>
          <div @click="onUserFeedback">
            <van-icon
              name="question-o"
              size="25"
            />
            <div>用户反馈</div>
          </div>
          <div>
            <van-icon
              name="service-o"
              size="25"
            />
            <div>小智同学</div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import * as userApi from '../../../../store/modules/user';
import { mapState, mapActions } from 'vuex';
export default {
  name: 'MinePage',
  data() {
    return {

    };
  },
  methods: {
    ...mapActions('user', ['updateUserList']),
    onUserFeedback() {
      this.$router.push('/UserFeedback');
    },
    goPersonalInformation() {
      this.$router.push('/PersonalInformation');
    }
  },
  computed: {
    ...mapState('user', ['userList']),
  },
  created() {
    this.updateUserList();
  }
}
</script>

<style lang="less" scoped>
@import url("../../../../assets/style/common.less");

.warp{
  box-sizing: border-box;
  width: 100%;
  background-color: #f5f5f5;

  header {
  position: relative;
  color: #fff;
  background-image: linear-gradient(-45deg, #9c9fc3,#494974);

  .indo-warp {
    box-sizing: border-box;
    width: 100%;
    background-image: linear-gradient(-45deg, #9c9fc3,#494974);
    padding: 48px 16px;

  .info {
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;

    .avatar {
      .avatar(24px)
    }

    .id {
      flex: 1;
      margin-left: 16px;
      font-size: 24px;
    }
  }

  .message {
    display: flex;
    justify-content: space-around;

    div {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
  }
}
  .box1 {
    top: 210px;
    position: absolute;
    width: 100%;
    height: 50px;
    border-radius: 60%;
    background-image: linear-gradient(-45deg, #9c9fc3,#696a8f);
  }
}


  .box {
    position: relative;
    box-sizing: border-box;
    // padding: 0 16px;


    nav {
    box-sizing: border-box;
    display: flex;
    position: absolute;
    // margin: 0 16px;
    left: 16px;
    width: calc(100% - 32px);
    background-color: #fff;
    top: -30px;
    border-radius: 16px;
    justify-content: space-around;

    >div {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 16px 0;

    }
  }

  main {
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    top: 60px;
    // margin: 0 16px;
    background-color: #fff;
    border-radius: 16px;
    padding-top: 10px;
    left: 16px;
    width: calc(100% - 32px);

    span {
      box-sizing: border-box;
      font-size: 24px;
      margin: 0 16px;
    }

    >div {
      box-sizing: border-box;
      display: flex;
      margin: 20px 16px;

      >div {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 16px;
      }

    }
  }
  }


}


</style>
